<template>
    <div>
        <PageTitle>
            <i class="appIcon" v-html="assetIcon"></i>
            <h1>Assets</h1>
        </PageTitle>

        <Panel>
            <div class="toolbar">

                    <select name="" id="viewSort">
                        <option value="all-items">View: All Items</option>
                        <option value="5">5 miles</option>
                    </select>
                <div class="right">
                    <div class="btn-group">
                        <button class="btn btn--white">
                            Edit View
                        </button>
                        <button class="btn create-new-view-button">
                            Create New View
                        </button>
                    </div>

                </div>

            </div>
            <SortableTable v-if="assets" :array="assets" :columns="columns"></SortableTable>
        </Panel>

    </div>
</template>
<script>
    import axios from 'axios'
    import qs from 'qs'
    import SortableTable from './SortableTable.vue'
    import Panel from './Panel.vue'
    import PageTitle from './PageTitle.vue'

    export default {
        components:{
            SortableTable,
            Panel,
            PageTitle
        },
        data() {
            return {
                assets: null,
                assetIcon: require('../../assets/img/Assets-Icon.svg'),
                columns: [
                    {
                        name: 'ID',
                        slug: 'id'
                    },
                    {
                        name: 'Name',
                        slug: 'asset_name'
                    },
                    {
                        name: 'Address',
                        slug: 'City'
                    },
                    {
                        name: 'Asset Owner',
                        slug: 'Asset_Owner'
                    },
                    {
                        name: 'Age',
                        slug: 'Age'
                    },
                    {
                        name: 'Building Engineer',
                        slug: 'Building_Engineer'
                    },
                    {
                        name: 'Systems',
                        slug: 'Country'
                    },
                ]
            }
        },

        mounted: function() {
            var self = this;
            axios.get(process.env.API_ROOT + 'am/am-physical-asset').then(function(response) {
                _.forEach(response.data, function(asset) {
                    var assetId = asset["id"];
                    asset.id = '<a href="#/asset/' + assetId + '" class="">' + assetId + '</a>';
                    // asset.systems = '<a href="#/asset/' + assetId + '/systems">' + asset.systems.length + '</a>';
                    asset.name = '<a href="#/asset/' + assetId + '" class="">' + asset.name + '</a>';
                });

                self.assets = response.data;
            });

        },



    }
</script>
